<template>
  <div class="track_the_playback">
    <div class="aroundtop">
      <!-- 设置分组 -->
      <i class="el-icon-speed" title="类型">类型</i>
      <el-select
        v-model="CLIENT_GROUP_NAME"
        placeholder="请选择类型"
        @change="groupchange"
      >
        <el-option label="机扫车" value="机扫车"></el-option>
        <el-option label="洒水车" value="洒水车"></el-option>
        <el-option label="洗路车" value="洗路车"></el-option>
        <el-option label="高压清洗车" value="高压清洗车"></el-option>
      </el-select>
      <!-- 设置道路 -->
      <i class="el-icon-speed" title="车辆名称">车辆名称</i>

      <el-select
        multiple
        collapse-tags
        v-model="selectedArray"
        @change="changeSelect"
        placeholder="请选择"
        style="width: 20%"
      >
        <el-checkbox
          v-model="checked"
          @change="selectAll"
          style="margin-left: 10px"
          >全选</el-checkbox
        >
        <el-option
          v-for="(item, index) in workcarList"
          :key="index"
          :label="item.LICENSE_PLATE"
          :value="item.LICENSE_PLATE"
        ></el-option>
      </el-select>

      <!-- 设置时间 -->
      <i class="el-icon-speed" title="时间">时间</i>
      <el-date-picker
        v-model="selectDay"
        type="date"
        placeholder="选择日"
        ref="historytime"
        @change="dataSearch"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      ></el-date-picker>

      <!-- 显示作业轨迹 -->
      <span class="buttonI" title="显示作业轨迹" @click="start"
        >显示作业轨迹</span
      >
      <!-- 显示车辆作业信息 -->
      <span class="buttonI" title="显示车辆作业信息" @click="openDataList"
        >显示车辆作业信息</span
      >
      <!-- 不合格道路 -->
      <span class="buttonI" title="不合格道路" @click="noworkDataList"
        >不合格道路</span
      >
      <div>
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showjschecked"
            @change="changePointA"
            active-color="#13ce66"
          ></el-switch>
          <i class="el-icon-speed" title="加水点" style="margin-left: 10px"
            >加水点</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showpwchecked"
            @change="changePointP"
            active-color="#13ce66"
          ></el-switch>
          <i class="el-icon-speed" title="排污点" style="margin-left: 10px"
            >排污点</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showdlzyclchecked"
            active-color="#13ce66"
          ></el-switch>
          <i
            class="el-icon-speed"
            title="道路作业车辆"
            style="margin-left: 10px"
            >道路作业车辆</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showslsjchecked"
            active-color="#13ce66"
          ></el-switch>
          <i class="el-icon-speed" title="上路时间" style="margin-left: 10px"
            >上路时间</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showxlsjchecked"
            active-color="#13ce66"
          ></el-switch>
          <i class="el-icon-speed" title="下路时间" style="margin-left: 10px"
            >下路时间</i
          ></span
        >
        <span style="margin-left: 5px">
          <el-switch
            class="el-checkbox-show"
            v-model="showzyxxchecked"
            active-color="#13ce66"
          ></el-switch>
          <i
            class="el-icon-speed"
            title="作业次数，作业时间"
            style="margin-left: 10px"
            >作业次数，作业时间</i
          ></span
        >
      </div>
    </div>
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
    </div>
    <!-- 数据列表 -->
    <el-dialog
      title="车辆作业信息展示"
      :visible.sync="dataListDialog"
      width="85%"
      class="dialogchild"
    >
      <div id="wrap">
        <!-- 设置时间 -->
        <div id="div1">
          <i class="el-icon-speed" title="时间">时间</i>
          <el-date-picker
            v-model="selectDay"
            type="date"
            placeholder="选择日"
            ref="historytime"
            @change="dataSearch"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div id="div2">
          <el-form style="height: 40px; padding-top: 15px">
            <i class="el-icon-speed" style="margin-left: 5px; margin-right: 5px"
              >车辆类型</i
            >
            <el-select v-model="CLIENT_GROUP_NAMED" placeholder="请选择类型">
              <el-option label="机扫车" value="机扫车"></el-option>
              <el-option label="洒水车" value="洒水车"></el-option>
              <el-option label="洗路车" value="洗路车"></el-option>
              <el-option label="高压清洗车" value="高压清洗车"></el-option>
            </el-select>
          </el-form>
        </div>
        <el-button
          size="mini"
          type="primary"
          @click="groupchangeD"
          style="margin-left: 5px; margin-right: 5px"
          >查 询</el-button
        >
        <el-button
          size="mini"
          type="success"
          @click="exportExcel"
          style="margin-left: 5px; margin-right: 5px"
          >导 出</el-button
        >
      </div>
      <el-table
        :data="workroadList"
        style="width: 150%"
        fit
        max-height="550"
        highlight-current-row
      >
        <el-table-column
          prop="车辆名称"
          label="车辆牌照"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="作业总里程米"
          label="作业长度"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="作业总时长分钟"
          label="作业时长"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="空驶总里程米"
          label="空驶长度"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="空驶总时长分钟"
          label="空驶时长"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="出行总里程米"
          label="行驶长度"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="出行总时长分钟"
          label="行驶时长"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="加水次数"
          label="加水次数"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="加水时长"
          label="加水时长"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="扫保面积"
          label="扫保面积"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="开始出行时间"
          label="开始时间"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="结束出行时间"
          label="结束时间"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="车辆类型"
          label="车辆类型"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="下属街镇"
          label="所属机构"
          width="140"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 数据列表 -->
    <el-dialog
      title="不合格道路信息展示"
      :visible.sync="dataListDialogno"
      width="85%"
      class="dialogchild"
    >
      <div id="wrap">
        <!-- 设置时间 -->
        <div id="div1">
          <i class="el-icon-speed" title="时间">时间</i>
          <el-date-picker
            v-model="selectDay"
            type="date"
            placeholder="选择日"
            ref="historytime"
            @change="dataSearch"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <el-button
          size="mini"
          type="primary"
          @click="groupchangeP"
          style="margin-left: 5px; margin-right: 5px"
          >查 询</el-button
        >
        <el-button
          size="mini"
          type="success"
          @click="exportExcel"
          style="margin-left: 5px; margin-right: 5px"
          >导 出</el-button
        >
      </div>
      <el-table
        :data="workroadListno"
        style="width: 150%"
        fit
        max-height="550"
        highlight-current-row
      >
        <el-table-column
          prop="ROADNAME"
          label="道路名称"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RGrade"
          label="道路等级"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Remarks"
          label="所属区域"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Lwork"
          label="作业遍数"
          width="140"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="WorkCar"
          label="可能负责车辆"
          width="980"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "@/common/js/date.js";
import ImageStart from "@/assets/img/playback/begin3.png";
import ImageEnd from "@/assets/img/playback/end3.png";
import "@/assets/css/common.css";
import MapStr from "@/main.js";
import DirectionImg from "@/assets/img/playback/direction.png";
import imgMarkerWater from '@/assets/img/marker/加水点.png'
import imgMarkerPollution from '@/assets/img/marker/排污水点.png'
import html2canvas from "html2canvas";
import export2Excel from "@/utils/exportExcel/index.js";
export default {
  data () {
    return {
      LICENSE_PLATE: "",
      setSlider: {
        max: 100,
        value: 0,
        step: 1,
      },
      map: null,
      hshmap: new Map(),
      dataworkinfoList: new Map(),
      mapZoom: 20,
      markerWithSlider: null,
      dataListDialog: false,
      dataListDialogno: false,
      dataList: [],
      workroadListall: [],
      workroadList: [],
      workroadListno: [],
      noworkroadList: [],
      dataListc: [],
      dataListTrack: [],
      dataCurrentIndex: 0,
      VID: 0,
      selectDay: "",
      lastselectDay: "",
      CLIENT_GROUP_NAME: "机扫车",
      CLIENT_GROUP_NAMED: "机扫车",
      workcountList: [],
      onecardataList: [],
      workcarList: [],
      showdlzyclchecked: false,
      showslsjchecked: false,
      showxlsjchecked: false,
      showzyxxchecked: false,
      showjschecked: false,
      showpwchecked: false,
      EARTH_RADIUS: 6378137,
      selectedArray: [],
      checked: false,
      listJiashui: [],
      listPaiwu: [],
    };
  },
  created () {
    this.VID = this.$route.query.VID;
    var now = new Date();
    now.setDate(now.getDate() - 1);
    var monthn = now.getMonth() + 1;
    var yearn = now.getFullYear();
    var dayn = now.getDate();
    this.selectDay = yearn + "-" + monthn + "-" + dayn;
    this.getPointFacility()
  },
  methods: {
    async getPointFacility () {
      var url = '/CarService/getPlaceWaterInfo?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      // data.push({ "NAME": "西区加水点1", "LONGITUDE": "117.279008", "LATITUDE": "39.073569", "TYPE": "A" })
      // data.push({ "NAME": "西区排污点1", "LONGITUDE": "117.479008", "LATITUDE": "39.073569", "TYPE": "P" })
      // data.push({ "NAME": "西区排污点2", "LONGITUDE": "117.579008", "LATITUDE": "39.073569", "TYPE": "P" })

      var iconA = new BMap.Icon(imgMarkerWater, new BMap.Size(50, 50));
      var iconP = new BMap.Icon(imgMarkerPollution, new BMap.Size(50, 50));

      data.forEach(item => {
        var marker = null;
        switch (item.TYPE) {
          case 'A':
            item.TYPE_NAME = '加水点'
            marker = new BMap.Marker(new BMap.Point(item.LONGITUDE, item.LATITUDE), { icon: iconA });

            this.listJiashui.push(marker);
            break;
          case 'P':
            item.TYPE_NAME = '排污点'
            marker = new BMap.Marker(new BMap.Point(item.LONGITUDE, item.LATITUDE), { icon: iconP });
            this.listPaiwu.push(marker);
            break;
        }
        marker.hide()
        var label = new BMap.Label(item.NAME, { offset: new BMap.Size(-10, 50) })
        marker.setLabel(label)
        marker.disableMassClear()
        this.map.addOverlay(marker);
      });

    },
    changePointA () {
      console.log(this.showjschecked)
      this.listJiashui.forEach(element => {
        if (this.showjschecked) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
    changePointP () {
      console.log(this.showpwchecked)
      this.listPaiwu.forEach(element => {
        if (this.showpwchecked) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
    selectAll () {
      this.selectedArray = [];
      if (this.checked) {
        this.workcarList.map((item) => {
          this.selectedArray.push(item.LICENSE_PLATE);
        });
      } else {
        this.selectedArray = [];
      }
    },
    changeSelect (val) {
      if (val.length === this.workcarList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },

    dataSearch () {
      this.getListByDay();
      this.getRoadList(this.CLIENT_GROUP_NAME);
    },
    groupchange (val) {
      this.getRoadList(val);
    },

    groupchangeD () {
      this.workroadList = [];
      if (this.lastselectDay != this.selectDay) {
        this.lastselectDay = this.selectDay;
        this.getcarDataList();
      } else {
        for (var i = 0; i < this.workroadListall.length; i++) {
          if (this.CLIENT_GROUP_NAMED == "机扫车") {
            if (
              this.workroadListall[i].车辆类型 == "机扫车" ||
              this.workroadListall[i].车辆类型 == "小型机扫车" ||
              this.workroadListall[i].车辆类型 == "吸尘车"
            ) {
              this.workroadList.push(this.workroadListall[i]);
            }
          } else if (
            this.CLIENT_GROUP_NAMED == this.workroadListall[i].车辆类型
          ) {
            this.workroadList.push(this.workroadListall[i]);
          }
        }
      }
    },

    groupchangeP () {
      this.getcarDataListP();
    },
    carchange (val) {
      this.onecardataList = [];
      for (var i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i][0].RoadName == val) {
          this.onecardataList = this.onecardataList.concat(this.dataList[i]);
        }
      }
    },
    async getListByDay (data) { },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom(
        new BMap.Point(MapStr.DefaultPointX, MapStr.DefaultPointY),
        this.mapZoom
      ); // 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity(MapStr.MapName); // 设置地图显示的城市 此项是必须设置的
      // 开启滚轮缩放
      this.map.enableScrollWheelZoom(true);
      // var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), {
      //   anchor: new BMap.Size(20, 20),
      // });
      // this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), {
      //   icon: myIcon,
      // });
      // this.markerWithSlider.disableMassClear();
      // this.map.addOverlay(this.markerWithSlider);
    },
    // 选定时间,获取车辆数据列表
    async getcarDataList () {
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      const params = {
        date: str,
        clientno: "0000009",
      };
      const { data } = await this.$Http.get("Vehicle/GetCWorkRuninfo", {
        params,
      });
      if (data.length != 0) {
        this.workroadListall = data;
        this.workroadList = [];
        for (var i = 0; i < this.workroadListall.length; i++) {
          if (this.CLIENT_GROUP_NAMED == "机扫车") {
            if (
              this.workroadListall[i].车辆类型 == "机扫车" ||
              this.workroadListall[i].车辆类型 == "小型机扫车" ||
              this.workroadListall[i].车辆类型 == "吸尘车"
            ) {
              this.workroadList.push(this.workroadListall[i]);
            }
          } else if (
            this.CLIENT_GROUP_NAMED == this.workroadListall[i].车辆类型
          ) {
            this.workroadList.push(this.workroadListall[i]);
          }
        }
      } else {
        this.$message.error("未获取到数据");
      }
    },

    async getcarDataListP () {
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      const params = {
        date: str,
        clientno: "0000009",
      };
      const { data } = await this.$Http.get("Vehicle/getNoWorkRoadDIALOG", {
        params,
      });
      if (data.length != 0) {
        this.workroadListno = data;
      } else {
        this.$message.error("未获取到数据");
      }
    },

    // 选定时间,获取道路轨迹数据列表
    async getDataList () {
      if (this.selectedArray == null || this.selectedArray == "undefined") {
        this.$message.error("未选择车辆");
        return;
      }
      var carstr = "";
      for (var i = 0; i < this.selectedArray.length; i++) {
        if (i == this.selectedArray.length - 1) {
          carstr = carstr + "'" + this.selectedArray[i] + "'";
        } else {
          carstr = carstr + "'" + this.selectedArray[i] + "',";
        }
      }
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      const params = {
        date: str,
        carName: carstr,
      };
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      await this.$Http.get("Vehicle/GetRoadGJALL", { params })
        .then((result) => {
          //下面是如果对返回结果再进行处理，根据项目需要
          // console.log(result)
          loading.close()
          if (result.data.length != 0) {
            this.dataList = result.data
            this.dataListc = result.data;
            this.setSlider.max = this.dataList.length;
            this.drawPicture();
          } else {
            this.$message.error('未获取到轨迹');
          }
        })
        .catch((err) => {
          loading.close()
          console.log('err:', err)
          this.$message.error('当前网络状态不稳定，请稍后重试');
          reject()
        });
      loading.close();
    },
    // async getTrackDataList () {
    //   // 16232
    //   let date = new Date(this.$refs.historytime.value);
    //   let str = formatDate(date, "yyyy-MM-dd");
    //   let odata = new Date(date.getTime() - 24 * 60 * 60 * 1000);
    //   let ostr = formatDate(odata, "yyyy-MM-dd");
    //   let [value, label] = this.$refs.workcarname.value.split(",");
    //   const params = {
    //     VID: label,
    //     StartDate: ostr + " 22:00:00",
    //     EndDate: str + " 22:00:00",
    //   };
    //   // console.log(params);
    //   // 设置加载效果
    //   const loading = this.$loading({
    //     lock: true,
    //     text: "数据加载中...",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.5)",
    //   });
    //   const { data } = await this.$Http.get("Vehicle/GetVehicleHistoryInfo", {
    //     params,
    //   });
    //   loading.close();
    //   if (data.length != 0) {
    //     this.dataListTrack = data;
    //     this.drawPictureTrack();
    //   } else {
    //     this.$message.error("未获取到轨迹");
    //   }
    // },
    // 获取两个点的角度
    getAngle (lng1, lat1, lng2, lat2) {
      const a = ((90 - lat2) * Math.PI) / 180;
      const b = ((90 - lat1) * Math.PI) / 180;
      const AOC_BOC = ((lng2 - lng1) * Math.PI) / 180;
      const cosc =
        Math.cos(a) * Math.cos(b) +
        Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
      const sinc = Math.sqrt(1 - cosc * cosc);
      const sinA = (Math.sin(a) * Math.sin(AOC_BOC)) / sinc;
      const A = (Math.asin(sinA) * 180) / Math.PI;
      let res = 0;
      if (lng2 > lng1 && lat2 > lat1) res = A;
      else if (lng2 > lng1 && lat2 < lat1) res = 180 - A;
      else if (lng2 < lng1 && lat2 < lat1) res = 180 - A;
      else if (lng2 < lng1 && lat2 > lat1) res = 360 + A;
      else if (lng2 > lng1 && lat2 === lat1) res = 90;
      else if (lng2 < lng1 && lat2 === lat1) res = 270;
      else if (lng2 === lng1 && lat2 > lat1) res = 0;
      else if (lng2 === lng1 && lat2 < lat1) res = 180;
      return res;
    },
    // 打开数据列表
    openDataList () {
      this.dataListDialog = true;
      this.getcarDataList();
    },
    noworkDataList () {
      this.dataListDialogno = true;
    },
    //截屏保存成图片
    savepic () {
      let canvas = document.querySelector(".track_the_playback");
      let that = this;
      html2canvas(canvas, {
        useCORS: true,
        tainttest: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight,
      }).then(function (canvas) {
        let type = "png";
        let imgData = canvas.toDataURL(type);
        // 照片格式处理
        let _fixType = function (type) {
          type = type.toLowerCase().replace(/jpg/i, "jpeg");
          let r = type.match(/png|jpeg|bmp|gif/)[0];
          return "image/" + r;
        };
        imgData = imgData.replace(_fixType(type), "image/octet-stream");
        let filename = "道路轨迹图片" + "." + type;
        that.saveFile(imgData, filename);
      });
    },
    saveFile (data, filename) {
      let save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;

      let event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },

    drawPicture () {
      this.map.clearOverlays();
      this.hshmap.clear();
      var boundPoints = [];

      for (var i = 0; i < this.dataList.length; i++) {
        var pointArr = [];
        for (var j = 0; j < this.dataList[i].length; j++) {
          const item1 = this.dataList[i][j];
          if (j == this.dataList[i].length - 1) {
            if (item1.NewLng != null) {
              pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat));
              boundPoints.push(new BMap.Point(item1.NewLng, item1.NewLat));
            } else {
              pointArr.push(new BMap.Point(item1.LONGITUDE, item1.LATITUDE));
              boundPoints.push(new BMap.Point(item1.LONGITUDE, item1.LATITUDE));
            }
            let color = "#912CEE";
            if (pointArr.length > 2) {
              var polyline = new BMap.Polyline(pointArr, {
                strokeColor: color,
                strokeWeight: 5,
                strokeOpacity: 2,
              });
              this.map.addOverlay(polyline);
            }
          } else {
            var ll2 = 0;
            if (pointArr.length > 0) {
              if (item1.NewLng != null) {
                ll2 = this.GetDistance(
                  item1.NewLng,
                  item1.NewLat,
                  pointArr[pointArr.length - 1].lng,
                  pointArr[pointArr.length - 1].lat
                );
              } else {
                ll2 = this.GetDistance(
                  item1.LONGITUDE,
                  item1.LATITUDE,
                  pointArr[pointArr.length - 1].lng,
                  pointArr[pointArr.length - 1].lat
                );
              }
            }
            if (ll2 > 260) {
              let color = "#912CEE";
              if (pointArr.length > 2) {
                console.log(pointArr);
                var polyline = new BMap.Polyline(pointArr, {
                  strokeColor: color,
                  strokeWeight: 5,
                  strokeOpacity: 2,
                });
                this.map.addOverlay(polyline);
              }
              pointArr = [];
            } else {
              if (item1.NewLng != null) {
                pointArr.push(new BMap.Point(item1.NewLng, item1.NewLat));
                boundPoints.push(new BMap.Point(item1.NewLng, item1.NewLat));
              } else {
                pointArr.push(new BMap.Point(item1.LONGITUDE, item1.LATITUDE));
                boundPoints.push(
                  new BMap.Point(item1.LONGITUDE, item1.LATITUDE)
                );
              }
            }
          }
        }
      }
      if (
        this.showdlzyclchecked ||
        this.showslsjchecked ||
        this.showxlsjchecked ||
        this.showzyxxchecked
      ) {
        for (var i = 0; i < this.dataList.length; i++) {
          var pointArr = [];
          for (var j = 0; j < this.dataList[i].length; j++) {
            const item1 = this.dataList[i][j];
            if (
              !this.hshmap.has(item1.LICENSE_PLATE + item1.RoadName) &&
              this.dataworkinfoList.has(item1.LICENSE_PLATE + item1.RoadName)
            ) {
              this.hshmap.set(item1.LICENSE_PLATE + item1.RoadName, 1);

              var pointpp;
              if (item1.NewLng != null) {
                pointpp = new BMap.Point(item1.NewLng, item1.NewLat);
              } else {
                pointpp = new BMap.Point(item1.LONGITUDE, item1.LATITUDE);
              }
              let item11 = null;

              for (var j = 0; j < this.workcountList.length; j++) {
                if (
                  this.workcountList[j].LICENSE_PLATE +
                  this.workcountList[j].RoadName ==
                  item1.LICENSE_PLATE + item1.RoadName
                ) {
                  item11 = this.workcountList[j];
                  break;
                }
              }

              var showtext = "";
              if (this.showdlzyclchecked) {
                showtext = showtext + item1.LICENSE_PLATE;
              }
              if (this.showslsjchecked) {
                showtext = showtext + "<br/>上路" + item11.SD.split(" ")[1];
              }
              if (this.showxlsjchecked) {
                showtext = showtext + "<br/>下路" + item11.ED.split(" ")[1];
              }
              if (this.showzyxxchecked) {
                showtext =
                  showtext +
                  "<br/>正" +
                  (
                    (parseFloat(item11.zhenglength) * 1000) /
                    parseFloat(item11.ArcGisLength)
                  ).toFixed(2) +
                  "<br/>反" +
                  (
                    (parseFloat(item11.fanlength) * 1000) /
                    parseFloat(item11.ArcGisLength)
                  ).toFixed(2) +
                  "<br/>时长" +
                  parseFloat(item11.WTime / 60).toFixed(2);
              }
              var label = new BMap.Label(showtext, {
                offset: new BMap.Size(-10, 50),
              });
              var markerImage = new BMap.Icon(
                DirectionImg,
                new BMap.Size(10, 10)
              );
              var marker = new BMap.Marker(pointpp, { icon: markerImage });
              marker.setLabel(label);
              this.map.addOverlay(marker);
            }
          }
        }
      }
      this.map.setViewport(boundPoints);
    },

    // 获得道路列表
    async getRoadList (val) {
      this.workcarList = [];
      let date = new Date(this.$refs.historytime.value);
      let str = formatDate(date, "yyyy-MM-dd");
      var url =
        "Vehicle/GetCarInfo?workdate=" +
        str +
        "&client_no=" +
        localStorage.getItem("CLIENT_NO"); // zxdata
      let { data } = await this.$Http.get(url);
      let workcarList_temp = [];
      workcarList_temp = data;
      // console.log(workcarList_temp);
      for (var i = workcarList_temp.length - 1; i > -1; i--) {
        if (this.CLIENT_GROUP_NAME == "机扫车") {
          if (
            workcarList_temp[i].CAR_TYPE == "机扫车" ||
            workcarList_temp[i].CAR_TYPE == "小型机扫车" ||
            workcarList_temp[i].CAR_TYPE == "吸尘车"
          ) {
            this.workcarList.push(workcarList_temp[i]);
          }
        } else {
          if (this.CLIENT_GROUP_NAME == workcarList_temp[i].CAR_TYPE) {
            this.workcarList.push(workcarList_temp[i]);
          }
        }
      }
    },
    // 获得道路列表
    async getWorkcountList () {
      let date = new Date(this.$refs.historytime.value);
      var carstr = "";
      for (var i = 0; i < this.selectedArray.length; i++) {
        if (i == this.selectedArray.length - 1) {
          carstr = carstr + "'" + this.selectedArray[i] + "'";
        } else {
          carstr = carstr + "'" + this.selectedArray[i] + "',";
        }
      }
      let str = formatDate(date, "yyyy-MM-dd");
      var url =
        "Vehicle/GetVehicleWorkCountList?date=" + str + "&carname=" + carstr; // zxdata
      let { data } = await this.$Http.get(url);
      this.workcountList = data;
      this.dataworkinfoList.clear();
      if (data.length != 0) {
        for (var i = 0; i < data.length; i++) {
          this.dataworkinfoList.set(
            data[i].LICENSE_PLATE + data[i].RoadName,
            data[i]
          );
        }
      }
    },

    // 开始播放道路作业轨迹
    start () {
      this.dataListDialog = false;
      this.dataListDialogno = false;
      this.getWorkcountList();
      this.getDataList();
    },
    // 清除轨迹
    clear () {
      this.map.clearOverlays();
    },
    // 导出Excel
    exportExcel () {
      let excelName = "车辆作业信息";
      const tHeader = [
        "车辆牌照",
        "作业长度",
        "作业时长",
        "空驶长度",
        "空驶时长",
        "行驶长度",
        "行驶时长",
        "加水次数",
        "加水时长",
        "扫保面积",
        "开始时间",
        "结束时间",
        "车辆类型",
        "所属机构",
      ];
      const filterVal = [
        "车辆名称",
        "作业总里程米",
        "作业总时长分钟",
        "空驶总里程米",
        "空驶总时长分钟",
        "出行总里程米",
        "出行总时长分钟",
        "加水次数",
        "加水时长",
        "扫保面积",
        "开始出行时间",
        "结束出行时间",
        "车辆类型",
        "下属街镇",
      ];
      export2Excel(tHeader, filterVal, this.workroadList, excelName);
    },
    GetDistance (lng1, lat1, lng2, lat2) {
      var radLat1 = this.Rad(lat1);
      var radLng1 = this.Rad(lng1);
      var radLat2 = this.Rad(lat2);
      var radLng2 = this.Rad(lng2);
      var a = radLat1 - radLat2;
      var b = radLng1 - radLng2;
      var result =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
            Math.cos(radLat1) *
            Math.cos(radLat2) *
            Math.pow(Math.sin(b / 2), 2)
          )
        ) *
        this.EARTH_RADIUS;
      return result;
    },
    Rad (d) {
      return (d * Math.PI) / 180.0;
    },
  },
  mounted () {
    // 显示地图
    this.mapShow();
    this.getRoadList(this.CLIENT_GROUP_NAME);
  },
};
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .aroundtop {
    padding: 10px;
    background-color: #007acc;
    height: 100%;
    border-radius: 5px;
    &:first-child {
      padding-left: 10px;
      height: auto;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      .el-checkbox-show {
        background-color: #007acc;
        border-color: rgb(196, 105, 20);
      }
    }
    .aroundtopcontent {
      // margin-left: 2px;
      margin-top: 8px;
      background-color: #fff;
      border-radius: 5px;
      width: 100%;
      i {
        color: #007acc;
        font-size: 17px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 15px;
      }

      .input-number {
        margin-top: 8px;
        margin-right: 15px;
        font-size: 14px;
        width: 100%;
        text-align: center;
      }
      .el-checkbox-show {
        background-color: rgb(255, 255, 255);
        border-color: rgb(196, 105, 20);
        margin-right: 8px;
      }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
    }
    .person_legend {
      width: 550px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      background-color: rgba(255, 0, 0, 0.9);
      padding: 5px 10px 0 10px;
      border-radius: 5px;
      h3 {
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #333;
        margin-bottom: 5px;
        i {
          float: right;
          cursor: pointer;
          &:before {
            color: #666;
          }
        }
      }
      p {
        // text-align: center;
        color: #333;
        float: left;
        width: 14%;
        margin-bottom: 8px;
        span {
          display: block;
          text-align: center;
          &:first-child {
            img {
              // background-size: 30px 30px;
              height: 30px;
            }
          }
        }
      }
    }
  }
}
.settingWindow {
  height: calc(~'100% - 32px');
}
/* 弹出框 */
/deep/.el-dialog {
  background: #ccd8e7;
  padding: 10px;
}
/deep/.el-dialog__title {
  color: #15428b;
  font-size: 16px;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 0px;
  background: #dfe8f6;
  border: 1px solid #99bbe8;
}
.el-icon-speed {
  margin-left: 5px;
}
.buttonI {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.legend {
  width: 550px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: #007acc;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.road1 {
  margin: 15px;
  width: 45px;
  height: 15px;
  background-color: #f8df72;
}
.road2 {
  margin: 17px;
  width: 45px;
  height: 10px;
  background-color: #f8df72;
}
.road3 {
  margin: 19px;
  width: 45px;
  height: 5px;
  background-color: #f8df72;
}
#warp {
  display: flex;
}
#div1,
#div2 {
  display: inline-block;
}
</style>
